<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html模板编辑器测试</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>
</head>

<body>
    <a id="btn_show" href="#" class="easyui-linkbutton" data-options="" onclick="javascript:show()">show edit</a>
    <p></p>
    <div id="hd" style="width:90%;height:600px;"></div>
    <p></p>
    <a id="btn_show" href="#" class="easyui-linkbutton" data-options="" onclick="javascript:destroy()">destroy</a>

    <!-- 引入文本编辑器库ACE -->
    <script type="text/javascript" src="/scripts/ace/ace.js"></script>
    <!-- 引入结束 -->
    <script type="text/javascript">
        $(function () {
            $("#hd").yqTmplHtmlEdit({
                isEdit: true,
                titles: titles,
                value: value
            });
        });

        function destroy() {
            $("#hd").yqTmplHtmlEdit("destroy");
        }

        function show() {
            var $pp = $("#btn_show");
            var prevent_e = $.getPreventDefault($pp[0]);
            prevent_e.id = $pp.attr("id");
            prevent_e.options = {};

            var mdiinfo = $.yqGetWindParams();

            var edit_pops = {
                prevent_e: prevent_e,
                mdiinfo: mdiinfo,

                isEdit: true, // 可编辑
                isName: true, // 显示唯一组建名称
                useAce: true, // 使用Ace作为文本编辑器
                titles: titles, // 数据域
                value: value, // 初始文本
                callback: function (text) {
                    console.log(text); // 编辑后得到的文本
                },
                width: $(window).width()*0.8,
                height: $(window).height()*0.8

            };

            if (window.top == window.self) {
                $.yqTmplHtmlPopEdit(edit_pops);
            }
            else {
                window.top.$.yqTmplHtmlPopEdit(edit_pops);
            }
        }


        var titles = [
            {
                "name": "sid",
                "is_func": false,
                "ui_title": "sId",
                "fd_type": "nvarchar",
                "length": 36,
                "decimal": 0,
                "ui_type": 1,
                "ui_width": 90,
                "ui_visible": false,
                "ui_readonly": true,
                "ui_mask": {
                    "blank": true,
                },
                group: "group1"
            },
            {
                "name": "lable",
                "is_func": false,
                "ui_title": "Lable",
                "fd_type": "nvarchar",
                "length": 36,
                "decimal": 0,
                "ui_type": 1,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": true,
                "ui_mask": {
                    "default": "lable..."
                },
                group: "group1"
            },
            {
                "name": "textbox",
                "ui_title": "Textbox",
                "fd_type": "nvarchar",
                "length": 50,
                "decimal": 0,
                "ui_type": 2,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": "默认值",
                    "min": 0,
                    "max": 50,
                    "blank": true,
                    "format": ""
                },
                group: "group1"
            },
            {
                "name": "checkbox",
                "is_func": false,
                "ui_title": "Checkbox",
                "fd_type": "boolean",
                "length": 1,
                "decimal": 0,
                "ui_type": 3,
                "ui_width": 30,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": true
                },
                group: "group2"
            },
            {
                "name": "datebox",
                "is_func": false,
                "ui_title": "Datetbox",
                "fd_type": "date",
                "length": 0,
                "decimal": 0,
                "ui_type": 4,
                "ui_width": 80,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": "2022-01-01",
                    "min": "2000-01-01",
                    "max": "2099-12-31",
                    "blank": true,
                    "format": "yyyy-MM-dd"
                },
                group: "group2"
            },
            {
                "name": "richbox",
                "is_func": false,
                "ui_title": "Richbox",
                "fd_type": "nvarchar",
                "length": 2000,
                "decimal": 0,
                "ui_type": 5,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": "默认值",
                    "min": 0,
                    "max": 50,
                    "blank": false,
                    editModeW: 400,
                    editModeH: 200,
                },
                group: "group2"
            },
            {
                "name": "combobox",
                "is_func": false,
                "ui_title": "Combobox",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 6,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": 2,
                    "blank": false,
                    "lists": [
                        {
                            "no": 1,
                            "name": "111111"
                        },
                        {
                            "no": 2,
                            "name": "222222"
                        },
                        {
                            "no": 3,
                            "name": "333333"
                        }
                    ]
                },
                group: "group2"
            },
            {
                "name": "foreignkey",
                "is_func": false,
                "ui_title": "ForeignKey",
                "fd_type": "nvarchar",
                "length": 36,
                "decimal": 0,
                "ui_type": 7,
                "ui_width": 180,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": null,
                    "blank": true,
                    "dbName": "yqbase",
                    "tbName": "sys.sys_table",
                    "tempNo": -1,
                    "displayType": 2,
                    "valueMember": "sid",
                    "displayMember": "textbox",
                    "isPage": true,
                    "pageSize": 10,
                    "addWhere": "",
                    "order": "textbox",
                    "panelWidth": 400,
                    "panelHeight": 260,
                    "expandMember": null,
                    "seekNo": -1,
                    "seekModeW": 800,
                    "seekModeH": 600
                },
                group: "group3"
            },
            {
                "name": "treeselect1",
                "is_func": false,
                "ui_title": "TreeSelect1",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 8,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": [
                        2,
                        201,
                        20101
                    ],
                    "blank": false,
                    "level": 1,
                    "subfield": "treeselect2",
                    "trees": [
                        {
                            "no": 1,
                            "name": "root1",
                            "extend": "扩展",
                            "default": true,
                            "subs": [
                                {
                                    "no": 101,
                                    "name": "sub101",
                                    "subs": [
                                        {
                                            "no": 10101,
                                            "name": "三级10101"
                                        },
                                        {
                                            "no": 10102,
                                            "name": "三级10102"
                                        }
                                    ]
                                },
                                {
                                    "no": 102,
                                    "name": "sub102",
                                    "subs": [
                                        {
                                            "no": 10201,
                                            "name": "三级10201"
                                        },
                                        {
                                            "no": 10202,
                                            "name": "三级10202"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "no": 2,
                            "name": "root2",
                            "subs": [
                                {
                                    "no": 201,
                                    "name": "Sub201",
                                    "subs": [
                                        {
                                            "no": 20101,
                                            "name": "三级20101"
                                        },
                                        {
                                            "no": 20102,
                                            "name": "三级20102"
                                        }
                                    ]
                                },
                                {
                                    "no": 202,
                                    "name": "Sub202",
                                    "subs": [
                                        {
                                            "no": 20201,
                                            "name": "三级20201"
                                        },
                                        {
                                            "no": 20202,
                                            "name": "三级20202"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                group: "group3"
            },
            {
                "name": "treeselect2",
                "is_func": false,
                "ui_title": "TreeSelect2",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 8,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "blank": false,
                    "level": 2,
                    "subfield": "treeselect3",
                    "trees": []
                },
                group: "group3"
            },
            {
                "name": "treeselect3",
                "is_func": false,
                "ui_title": "TreeSelect3",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 8,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "blank": false,
                    "level": 3,
                    "subfield": "",
                    "trees": []
                },
                group: "group3"
            },
            {
                "name": "numberbox",
                "is_func": false,
                "ui_title": "Numberbox",
                "fd_type": "number",
                "length": 10,
                "decimal": 2,
                "ui_type": 9,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": 100,
                    "min": 0,
                    "max": 20000,
                    "precision": 2,
                    "groupSeparator": ",",
                    "blank": true
                },
                group: ""
            },
            {
                "name": "numberspinner",
                "is_func": false,
                "ui_title": "Numberspinner",
                "fd_type": "number",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": 100,
                    "min": -10,
                    "max": 10000,
                    "groupSeparator": ",",
                    "blank": false
                },
                group: ""
            },
            {
                "name": "timespinner",
                "is_func": false,
                "ui_title": "TimeSpinner",
                "fd_type": "varchar",
                "length": 8,
                "decimal": 0,
                "ui_type": 11,
                "ui_width": 80,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": "12:00",
                    "min": "06:00",
                    "max": "18:00",
                    "seconds": false,
                    "blank": true
                },
                group: ""
            },
            {
                "name": "datetimebox",
                "is_func": false,
                "ui_title": "DateTimebox",
                "fd_type": "datetime",
                "length": 0,
                "decimal": 0,
                "ui_type": 12,
                "ui_width": 80,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": "2022-01-01 00:00",
                    "min": "2000-01-01 00:00",
                    "max": "2099-12-31 00:00",
                    "blank": false,
                    "seconds": false,
                    "format": "yyyy-MM-dd hh:mm"
                },
                group: ""
            },
            {
                "name": "checkbox_2",
                "is_func": true,
                "ui_title": "Checkbox_2",
                "fd_type": "boolean",
                "length": 1,
                "decimal": 0,
                "ui_type": 1,
                "ui_width": 30,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": true
                },
                "func": "{checkbox}?'是':'否'",
                group: ""
            },
            {
                "name": "isdel",
                "is_func": false,
                "ui_title": "IsDel",
                "fd_type": "boolean",
                "length": 1,
                "decimal": 0,
                "ui_type": 3,
                "ui_width": 50,
                "ui_visible": true,
                "ui_readonly": false,
                "ui_mask": {
                    "default": true
                },
                group: ""
            },
            {
                "name": "state",
                "is_func": false,
                "ui_title": "State",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 6,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readonly": true,
                "ui_mask": {
                    "default": 2,
                    "blank": false,
                    "lists": [
                        {
                            "no": 0,
                            "name": "草稿"
                        },
                        {
                            "no": 1,
                            "name": "已提交"
                        },
                        {
                            "no": 9,
                            "name": "已完成"
                        }
                    ]
                },
                group: ""
            }
        ];

        var value = `
<table _n="_tb">
  <tbody>
    <tr>
      <td><label id="lbl_textbox">Textbox</label></td>
      <td><input id="txt_textbox" type="text" style="width: 62px;"></td>
      <td><label id="lbl_checkbox">Checkbox</label></td>
      <td><input id="txt_checkbox" type="checkbox"></td>
    </tr>
    <tr>
      <td><label id="lbl_datebox">Datetbox</label></td>
      <td><input id="txt_datebox" type="text" style="width: 62px;"></td>
      <td><label id="lbl_richbox">Richbox</label></td>
      <td><textarea id="txt_richbox"  style="width: 62px;height:30px;"></textarea></td>
    </tr>
  </tbody>
</table>
            `;
    </script>
</body>

</html>